<template>
  <div class="page-class">
    <Breadcrumb>
      <a-button type="primary" @click="handle2Topic">主题类型管理</a-button>
    </Breadcrumb>
    <div class="cnt-class">
      <div class="query">
        <a-row>
          <a-col :span="6">
            <a-input-search
              v-model.trim="queryName"
              :maxLength="50"
              allowClear
              placeholder="请输入昵称/姓名/手机号/身份证号"
              @search="onSearch"
            >
              <a-button slot="enterButton" type="primary"> 搜索 </a-button>
            </a-input-search>
          </a-col>
        </a-row>
        <!-- <span class="label">物业工单统计（个）</span> -->
        <!-- <div class="card">
          <div class="card-item">
            <span class="label">完成率</span>
            <span class="number">90%</span>
          </div>
          <div class="card-item">
            <span class="label">好评率</span>
            <span class="number">98%</span>
          </div>
          <div class="card-item">
            <span class="label">维护维修</span>
            <span class="number">22</span>
          </div>
          <div class="card-item">
            <span class="label">环境保洁</span>
            <span class="number">12</span>
          </div>
          <div class="card-item">
            <span class="label">绿化养护</span>
            <span class="number">2</span>
          </div>
          <div class="card-item">
            <span class="label">秩序维护</span>
            <span class="number">1</span>
          </div>
          <div class="card-item">
            <span class="label">车辆管理</span>
            <span class="number">3</span>
          </div>
          <div class="card-item">
            <span class="label">环境监测</span>
            <span class="number">30</span>
          </div>
        </div> -->
        <!-- 筛选列表 -->
        <Collapse :opend="opend" @changOpend="changOpend">
          <a-row>
            <a-col :span="24">
              <span class="collapse-label">类型：</span>
              <a-radio-group v-model="query.type">
                <a-radio
                  v-for="(node, index) in orderTypeList"
                  :value="node.value"
                  :key="index"
                >
                  {{ node.name }}
                </a-radio>
              </a-radio-group>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-button type="primary" @click="onSearch()">查询</a-button>
              <a-button type="default" @click="handleRest">重置</a-button>
            </a-col>
          </a-row>
        </Collapse>
      </div>
      <span class="title">服务评价</span>
      <div class="tab">
        <a-tabs v-model="activeKey" @change="handelChangeTab">
          <a-tab-pane :key="1" tab="全部">
            <BaseAll
              ref="BaseAll"
              v-if="activeKey === 1"
              :queryName="queryName"
              :type="query.type"
              :y="y"
            ></BaseAll>
          </a-tab-pane>
          <a-tab-pane :key="2" tab="待审批">
            <BaseAppor
              ref="BaseAppor"
              v-if="activeKey === 2"
              :queryName="queryName"
              :type="query.type"
              :y="y"
            ></BaseAppor>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import BaseAll from "./components/BaseAll.vue";
import BaseAppor from "./components/BaseAppor.vue";
import Collapse from "@/components/Collapse";
import { orderTypeList } from "@/utils";

export default {
  components: {
    BaseAll,
    BaseAppor,
    Collapse
  },
  data() {
    return {
      opend: true,
      activeKey: 1,
      query: {
        type: undefined
      },
      queryName: "",
      orderTypeList
    };
  },
  computed: {
    y() {
      return this.opend ? 290 : 390;
    }
  },
  methods: {
    changOpend(opend) {
      this.opend = opend;
    },
    handleRest() {
      this.query = {
        type: undefined
      };
    },
    onSearch() {
      if (this.activeKey === 1) {
        this.$refs.BaseAll.onSearch();
      } else {
        this.$refs.BaseAppor.onSearch();
      }
    },
    handelChangeTab(activeKey) {
      this.activeKey = activeKey;
    },
    handle2Topic() {
      this.$router.push({
        path: "/order/topic"
      });
    }
  }
};
</script>
<style scoped lang="less">
.label {
  .font-Medium(14px,rgba(0, 0, 0, 1),62px,400);
}
.title {
  .font-Medium(14px,rgba(0, 0, 0, 1),30px,400);
}
.card {
  width: 80%;
  display: flex;
  align-items: center;
  padding: 0 16px;

  .card-item {
    flex: 1;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;

    .label {
      height: 30px;
      .font-Medium(14px,rgba(0, 0, 0, 1),30px,400);
    }
    .number {
      height: 32px;
      .font-Medium(18px,rgba(0, 0, 0, 1),32px,bolder);
    }
  }
}
.tab {
  /deep/.ant-tabs {
    .ant-tabs-bar {
      border: 0;
      margin: 0 0 26px 10px;
    }
  }
}
</style>
